import { Router, Route, Switch } from "dva/router";
import IndexPage from "./routes/IndexPage";
import Account from "./routes/Account";
import Total from "./routes/Total";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";
import { Layout, Menu } from "antd";
import React, { useState,useEffect } from "react";
const { Header, Sider, Content } = Layout;

const App = (props) => {
  const [collapsed, setCollapsed] = useState(false);
  const [menuList, setMenuList] = useState([
    {
      key: "1",
      icon: <UserOutlined />,
      label: "首页",
      path: "/",
    },
    {
      key: "2",
      icon: <UserOutlined />,
      label: "账单",
      path: "/account",
    },
    {
      key: "3",
      icon: <VideoCameraOutlined />,
      label: "统计",
      path: "/total",
    },
  ]);
  const [selectedKeys, setselectedKeys] = useState(["1"]);
  const clickMenu = ({ key }) => {
    let path = menuList.filter((item) => item.key == key)[0]["path"];
    setselectedKeys([key]);
    props.history.push(path);
  };

  useEffect(() => { //模拟页面生命周期
    let pathname = props.history.location.pathname;
    //获取浏览器的路径
    let  key  = menuList.filter(item=>item.path === pathname)[0]["key"];
    setselectedKeys([key]);

  }, [])

  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo" />
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={selectedKeys}
          items={menuList}
          onClick={clickMenu}
        />
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{
            padding: 0,
          }}
        >
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: "trigger",
              onClick: () => setCollapsed(!collapsed),
            }
          )}
        </Header>
        <Content
          className="site-layout-background"
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
          }}
        >
          <Router history={props.history}>
            <Switch>
              <Route path="/" exact component={IndexPage} />
              <Route path="/account" component={Account} />
              <Route path="/total" component={Total} />
            </Switch>
          </Router>
        </Content>
      </Layout>
    </Layout>
  );
};
export default App;

// import React from 'react';
// import { Router, Route, Switch } from 'dva/router';
// import IndexPage from './routes/IndexPage';
// import Products from './routes/Products';
// import UserPage from './routes/UserPage';

// function RouterConfig({ history }) {
//   return (
//     <div>
//       公共页面
//     <Router history={history}>
//       <Switch>
//         <Route path="/" exact component={IndexPage} />
//         <Route path="/products"  component={Products} />
//         <Route path="/user"  component={UserPage} />
//       </Switch>
//     </Router>
//     </div>
//   );
// }

// export default RouterConfig;
